<template>
<div class="father">
    <h1>分类管理</h1>
    <div class="div01">
        <div class="div02">
            <el-input placeholder="请输入内容" v-model="canshuname.object" style="width: 200px" />
            <el-button type="primary" style="margin-left: 16px" @click="chaname">查询</el-button>
        </div>
        <div class="div03">
            <el-button type="primary" style="margin-left: 16px" @click="drawershapping = true">
            新增商品分类
            </el-button>

            <el-drawer v-model="drawershapping" title="商品分类">
                <span>
                    <el-form
                        ref="ruleFormRef"
                        style="max-width: 600px"
                        :model="ruleForm"
                        :rules="rules"
                        label-width="auto"
                        class="demo-ruleForm"
                        status-icon
                    >
                        <el-form-item label="商品名称" prop="name">
                            <el-input v-model="ruleForm.name" />
                        </el-form-item>
                        <el-form-item label="顺序" prop="sort">
                            <el-input v-model.number="ruleForm.sort" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">
                                提交
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </span>
            </el-drawer>

            <el-button type="primary" style="margin-left: 16px" @click="drawercan = true">
                新增套餐分类
            </el-button>

            <el-drawer v-model="drawercan" title="套餐分类">
                <span>
                    <el-form
                        ref="ruleFormRefcan"
                        style="max-width: 600px"
                        :model="ruleFormcan"
                        :rules="rulescan"
                        label-width="auto"
                        class="demo-ruleForm"
                        status-icon
                    >
                        <el-form-item label="套餐名称" prop="name">
                            <el-input v-model="ruleFormcan.name" />
                        </el-form-item>
                        <el-form-item label="顺序" prop="sort">
                            <el-input v-model.number="ruleFormcan.sort" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitFormcan(ruleFormRef)">
                                提交
                            </el-button>
                            <el-button @click="resetFormcan(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </span>
            </el-drawer>
        </div>
    </div>

   <el-table :data="tableData" border style="width: 90%">
    <el-table-column prop="name" label="分类名称" width="180" />
    <el-table-column prop="type" label="分类类型" width="180" >
        <template #default="scope">
          <el-tag v-if="scope.row.type==1">菜品分类</el-tag>
          <el-tag v-else>套餐分类</el-tag>
        </template>
    </el-table-column>
    <el-table-column prop="updateTime" label="操作时间" />
    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>

  </el-table>
  <!-- 分页查文章信息 -->
    <div class="pagination">
      <el-pagination
        :current-page="canshu.pageNum"
        :page-size="canshu.pageSize"
        :page-sizes="[1, 2, 3, 4]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="canshu.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
</div>
</template>
<script setup>
import { ref, reactive ,onMounted} from 'vue'
import { ElMessage,ElMessageBox} from 'element-plus'

//导入axios请求
import {suoyou,shangpin,taocan,shanchu,huolou} from '../api/category'

//初始化表格数据
const tableData =ref([
    {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }
]) 

//定义分页参数
const canshu=ref({
  pageNum:1,
  pageSize:2,
  total:0
})
//分页查询所有数据
const categorysuoyou= async()=>{
    const res=await suoyou(canshu.value);
    console.log(res);
    if(res.code==20041){
      ElMessage.success(res.msg)
      tableData.value=res.data.list;
      canshu.value.total=res.data.total;
    }else{
        ElMessage.error(res.msg)
    }
}

//定义套餐分类
const drawercan = ref(false)
//定义新增商品分类
const drawershapping = ref(false)

//定义新增商品分类
const ruleForm=ref({
    name: '',
    sort: ''
})
//定义用于校验商品的表单对象
const ruleFormRef =ref(null)
//表单验证规则
const rules=ref({
    name: [
        { required: true, message: '请输入商品的名称', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
    ],
    sort: [
        { required: true, message: '请输入套餐的顺序', trigger: 'blur' },
        { type: 'number', message: '排序必须为数字值'} 
    ]
})

//增加商品分类
const addcategory=async()=>{
    const res=await shangpin(ruleForm.value)
    console.log(res)
    if(res.code==20011){
        ElMessage.success(res.msg)
        //刷新表格数据
        categorysuoyou();
        //关闭弹窗
        drawershapping.value=false;
    }else{
        ElMessage.error(res.msg)
    }
}

//商品表单提交
const submitForm = (obj) => {
    // 触发obj这个表单的校验规则 如果校验通过 则valid是true  否则是false
    obj.validate((valid) => {
        if (valid) {
            ElMessage({
                message: '校验成功',
                type: 'success',
            })
            //向后端发送请求
            addcategory();
        } else {
            ElMessage.error('校验失败')
        }
    })
}
//商品表单重置
const resetForm = (obj) => {
  obj.resetFields();
}

//定义新增套餐分类
const ruleFormcan=ref({
    name: '',
    sort: ''
})
//定义用于校验套餐的表单对象
const ruleFormRefcan =ref(null)
//表单验证规则
const rulescan=ref({
    name: [
        { required: true, message: '请输入套餐名称', trigger: 'blur' },
        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
    ],
    sort: [
        { required: true, message: '请输入套餐的顺序', trigger: 'blur' },
        { type: 'number', message: '排序必须为数字值'} 
    ]
})

//增加套餐分类
const addcategorycan=async()=>{
    const res=await taocan(ruleFormcan.value)
    console.log(res);
    if(res.code==20011){
        ElMessage.success(res.msg)
            //刷新表格数据
            categorysuoyou();
            //关闭抽屉
            drawercan.value=false;
    }else{
        ElMessage.error(res.msg)
    }
}
//套餐表单提交
const submitFormcan = (obj) => {
    // 触发obj这个表单的校验规则 如果校验通过 则valid是true  否则是false
    obj.validate((valid) => {
        if (valid) {
            ElMessage({
                message: '校验成功',
                type: 'success',
            })
             //向后端发送请求
            addcategorycan();
        } else {
            ElMessage.error('校验失败')
        }
    })
}
//套餐表单重置
const resetFormcan = (obj) => {
  obj.resetFields();
}

//根据名称分页查询分类
//定义分页参数
const canshuname=ref({
  pageNum:1,
  pageSize:2,
  total:0,
  object:''
})
//向后端传值
const chaname=async()=>{
    console.log(canshuname.value);
    const res=await huolou(canshuname.value)
    if(res.code==20041){
        ElMessage.success(res.msg)
        tableData.value=res.data.list;
        canshu.value.total=res.data.total;
    }else{
        ElMessage.error(res.msg)
    }
}

//当你修改每页条数时触发该事件
const handleSizeChange = (val) => {
  canshu.value.pageSize=val;  //把选中的每页显示条数赋值给canshu.pageSize
  categorysuoyou();  //重新调用getfenlei方法
}
//当你修改页码时会触发该事件
const handleCurrentChange = (val) => {
  canshu.value.pageNum=val; //把点击的页码赋值给canshu.pageNum
  categorysuoyou();  //重新调用getfenlei方法
}

//根据名称删除分类
const deletecategory=async(name)=>{
    const res=await shanchu(name)
    if(res.code==20021){
        ElMessage.success(res.msg)
        //刷新表格数据
        categorysuoyou();
    }else{
        ElMessage.error(res.msg)
    }
}

//删除按钮
const handleDelete=(name)=>{
    console.log(name);
    ElMessageBox.confirm(
      '确认删除吗？',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
    )
      .then(() => {
        deletecategory(name);
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message:'Delete canceled',
        })
      })
}

//当页面加载完成时，执行onMounted
onMounted(()=>{
   categorysuoyou();
})
</script>


<style lang='scss' scoped>
.father {
    h1{
        margin-left: 20px;
    }
    margin: 20px;
    border: 1px solid #ccc;
    .div01 {
        margin-right: 150px;
        display: flex;
        justify-content:space-between;
    }
    .div02 {
        margin-left: 20px;
    }
    .el-table {
    margin: 20px;
    }
    .pagination {
        margin: 20px;
    }
}
</style>